<template>
	<view class="pics">
		<scroll-view class="left" scroll-y="true">
			<view :class="active===index?'active':''" v-for="(item,index) in cates" :key='item.floor_title.name' @click="leftClickHandle(index)">{{item.floor_title.name}}</view>
		</scroll-view>
		<scroll-view class="right" scroll-y="true">
			<view class="item" v-for="sp in secondData" :key='sp.name'>
				<image @click="previewImg(sp.image_src)" :src="sp.image_src"></image>
				<text>{{sp.name}}</text>
			</view>
			<text v-if="secondData.length === 0">暂无数据</text>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cates:[],
				active:0,
				secondData: []
			}
		},
		onLoad() {
			this.getPicData()
		},
		methods: {
			//获取图片数据
			async getPicData () {
				const res = await this.http({
					url: '/api/public/v1/home/floordata'
				})
				this.cates = res.data.message
				this.secondData = res.data.message[0].product_list
				console.log(this.secondData)
			},
			//点击左边栏切换
			leftClickHandle(index){
				this.active=index;
				this.secondData = this.cates[index].product_list
			},
			//预商品
			previewImg(current){
				const urls = this.secondData.map(item=>{
					return item.image_src
				})
				uni.previewImage({
					current,
					urls
				})
			}
		}
	}
</script>

<style lang="scss">
.pics{
	height: 100%;
	display: flex;
	.left{
		width: 200rpx;
		height: 100%;
		border-right:1px solid #eee;
		view{
			height: 60px;
			line-height: 60px;
			color: #333;
			text-align: center;
			font-size: 30rpx;
			border-top: 1px solid #eee;
		}
		.active{
			background-color: $shop-color;
			color: #fff;
		}
	}
	.right{
		height: 100%;
		width: 520rpx;
		margin: 10rpx auto;
		/deep/ .item{
			text-align: center;
			/deep/ image{
				width: 520rpx;
				height: 520rpx;
				border-radius: 5px;
				box-sizing: border-box;
			}
			/deep/  uni-text{
				font-size: 30rpx;
				line-height: 60rpx;
			}
		}
	}
}
</style>
